<template>
    <div>
        <div class="film-item" v-for="(film, index) in list" :key="index"
            @click=" $root.$emit('update:name','DetailPage') "
        >
            <div class="film-img" :style=" `background-image: url(${film.filmImg})` "></div>
            <div class="film-title">{{ film.filmName }}</div>
            <div class="film-source" v-if="film.source">
                <!-- 
                    当一个标签上同时出现 v-for 和 v-if 优先执行 v-for
                -->
                <span class="star-img" v-for="c in 5" :class="film.source | starClass(c)"></span>
                <span class="star-source">{{ film.source | fiexd }}</span>
            </div>
            <div class="film-source" v-if="!film.source">
                <span class="star-tip">暂无评分</span>
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component("FilmList", {
        template: document.currentScript.ownerDocument.querySelector("template"),
        // props:["film"]
        props: {
            list: {
                type: Array,
                required: true,
                default() {
                    return []
                }
            }
        },
        filters:{
            starClass(target,c){
                return Math.ceil(target)>=c?'open':'close';
            },
            fiexd(source){
                if(source===null){
                    return source;
                }else{
                    return (source*1).toFixed(1);
                }
            }
        }

    })

</script>